<script setup lang="ts">
import type { IMessage } from '@/types/chat'
import type { PropType } from 'vue'
import Document from '@/components/chat/icons/Document.vue'

const props = defineProps({
  message: {
    type: Object as PropType<IMessage>,
    required: true
  }
})
</script>

<template>
  <div class="user-message">
    <div class="user-content">
      {{ message.content }}
    </div>
    <div class="user-upload" v-if="props.message.body && props.message.body.files.length > 0">
      <div v-for="(file, index) in props.message.body.files" :key="index">
        <div class="user-upload-item">
          <!-- 文件图标 -->
          <div class="file-icon">
            <Document />
          </div>
          <div class="file-info">
            <div class="file-name">{{ file.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-content {
  white-space: pre-wrap;
}

.user-upload {
  margin-top: 5px;
  font-size: 0.85em;
  display: flex;
  flex-direction: column;
  gap: 5px; /* 子元素之间的间距 */
}

.user-upload-item {
  display: flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 6px;
  background-color: var(--chat-primary-border-color);
  color: var(--chat-primary-color);
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-upload-item:hover {
  color: var(--chat-primary-color-hover);
  transform: scale(1.02); /* 轻微放大效果 */
}

.file-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}

.file-icon svg {
  width: 70%;
  height: 70%;
  fill: currentColor; /* 图标颜色跟随文本颜色 */
}

.file-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.file-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 长文件名省略号处理 */
}
</style>
